//文章列表组件
<template>

    <div class="whitebg bloglist">

      <ul v-for="article in articles" :key="article.id">
        <!--多图模式 置顶设计-->
        <li v-if="article.article_type === 'multi'">
          <h3 class="blogtitle">
              <router-link :to="{name: 'article-detail', params: {id: article.id}}">
              <b v-if="article.is_top">【顶】</b>{{ article.title }}</router-link>
          </h3>
          <span class="bplist">
            <a v-for="(img, index) in article.images" :key="index" :href="img.url" target="_blank">
              <img :src="img.image" :alt="'图片' + (index + 1)">
            </a>
          </span>
          <p class="blogtext" v-html="article.excerpt"></p>
          <p class="bloginfo">
           <i class="avatar"><img :src="article.author.avatar" alt="作者头像" class="avatar-img"></i>
            <span class="meta-item"><i class="fa fa-user"></i>{{ article.author.nickname }}</span>
            <span class="meta-item"><i class="fa fa-calendar"></i>{{ article.publish_date }}</span>
            <span class="meta-item">【<a href="/">{{ article.category_name }}</a>】</span>
            <span class="meta-item"><i class="fa fa-thumbs-up"></i>{{ article.like_count }}点赞</span>
            <span class="meta-item"><i class="fa fa-comment"></i>{{ article.comments_count }}评论</span>
            <span class="meta-item"><i class="fa fa-eye"></i>{{ article.views_count }}浏览</span>

          </p>
          <router-link :to="{name: 'article-detail', params: {id: article.id}}" class="viewmore">阅读更多</router-link></li>
        <!--单图-->
        <li v-else-if="article.article_type === 'single'">
          <h3 class="blogtitle">
             <router-link :to="{name: 'article-detail', params: {id: article.id}}">
              <b v-if="article.is_top">【顶】</b>{{ article.title }}</router-link>
          </h3>
          <span class="blogpic imgscale">
            <i><a href="/">{{ article.category_name }}</a></i>
            <a href="/" title=""><img :src="article.image" alt=""></a>
          </span>
          <p class="blogtext" v-html="article.excerpt"></p>
          <p class="bloginfo">
            <i class="avatar"><img :src="article.author.avatar" alt="作者头像" class="avatar-img"></i>
            <span class="meta-item"><i class="fa fa-user"></i>{{ article.author.nickname }}</span>
            <span class="meta-item"><i class="fa fa-calendar"></i>{{ article.publish_date }}</span>
            <span class="meta-item">【<a href="/">{{ article.category_name }}</a>】</span>
            <span class="meta-item"><i class="fa fa-thumbs-up"></i>{{ article.like_count }}点赞</span>
            <span class="meta-item"><i class="fa fa-comment"></i>{{ article.comments_count }}评论</span>
            <span class="meta-item"><i class="fa fa-eye"></i>{{ article.views_count }}浏览</span>
          </p>
          <router-link :to="{name: 'article-detail', params: {id: article.id}}" class="viewmore">阅读更多</router-link></li>
        <!--纯文字-->
        <li v-else>
          <h3 class="blogtitle">
            <router-link :to="{name: 'article-detail', params: {id: article.id}}">
              <b v-if="article.is_top">【顶】</b>{{ article.title }}</router-link>
          </h3>
          <p class="blogtext" v-html="article.excerpt"></p>
          <p class="bloginfo">
           <i class="avatar"><img :src="article.author.avatar" alt="作者头像" class="avatar-img"></i>
            <span class="meta-item"><i class="fa fa-user"></i>{{ article.author.nickname }}</span>
            <span class="meta-item"><i class="fa fa-calendar"></i>{{ article.publish_date }}</span>
            <span class="meta-item">【<a href="/">{{ article.category_name }}</a>】</span>
            <span class="meta-item"><i class="fa fa-thumbs-up"></i>{{ article.like_count }}点赞</span>
            <span class="meta-item"><i class="fa fa-comment"></i>{{ article.comments_count }}评论</span>
            <span class="meta-item"><i class="fa fa-eye"></i>{{ article.views_count }}浏览</span>
          </p>
         <router-link :to="{name: 'article-detail', params: {id: article.id}}" class="viewmore">阅读更多</router-link>
        </li>

      </ul>
    </div>

</template>

<script setup>
const props = defineProps({
  articles: {
    type: Array,
    required: true,
    default: () => []
  },
  loading: Boolean,
  error: String
})
</script>

<style scoped>
.article-list {

}

.article-list a {
  color: var(--article-title-color,#333);
  text-decoration: none;
}

.bloglist {
  background: var(--article-bg-color,#fff);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 100%;
}

.htitle {
  border-bottom: 1px solid var(--article-border-color,#eee);
  margin-bottom: 20px;
  width: 100%;
}

.hnav {
  float: right
}

.hnav a {
  display: block;
  margin-right: 10px;
  padding-right: 10px;
  float: left;
  position: relative
}

.hnav a:after {
  position: relative;
  content: "/";
  right: -10px;
  bottom: 0;
  color: #ccc
}

.hnav a:last-child::after {
  content: ""
}

.bloglist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bloglist li {
  overflow: hidden;
  margin-bottom: 10px;
  border-bottom: #eee 1px dashed;
  position: relative;
  min-height: 120px;
  border-radius: 5px;
  padding:10px 20px;
  transition: all .3s ease;
  transition: all 0.3s;
}
.bloglist li:hover {
  transform: translateY(-5px);
  background:var(--article-hover-bg-color, #f9f4f4);
  transition: all .3s ease;
  transition: all 0.3s;
}

.blogtitle {
  margin: 0 0 10px 0;
  font-size: 18px;
  overflow: hidden;
}
.blogtitle a {
  color: var(--article-title-color,#333);
  text-decoration: none;
}
.bloglist li:hover .blogtitle a {
  color: #12b7de;
}

.blogtitle b {
  color: #F00
}

a.viewmore {
  display: block;
  right: 10px;
  bottom: 20px;
  position: absolute;
  padding: 3px 10px;
  background: var(--article-button-bg-color, #12b7de);
  color: var(--article-button-text-color,#fff);
  border-radius: 3px;
}

.blogpic {
  float: left;
  width: 23.2%;
  margin-right: 20px;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  position: relative
}

.blogpic i {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  font-style: normal;
  padding: 3px 5px;
  background: rgba(18, 182, 221, .8);
  font-size: 14px;
}

.blogpic i a {
  color: #FFF
}

.bplist {
  display: block;
  overflow: hidden
}

.bplist a {
  display: block;
  border-radius: 3px;
  float: left;
  margin:0 4px;
  width: 24%;
  overflow: hidden
}
.bplist a:nth-child(4n) {
  margin-right: 0
}

.bplist a img {
  width: 200px;
  height: 140px;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  transition: all 0.5s;
}

.bplist a img:hover {
  transform: scale(1.05)
}

.blogtext {
  font-size: 14px;
  color: var(--article-text-color, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  margin-top: 20px;
}

.bloginfo {
  margin-top: 20px;
  overflow: hidden;
  color: var(--article-info-color, #999);
  line-height: 34px;
}

.bloginfo span {
  margin: 0 5px
}

.bloginfo span a {
  color: #096
}

.avatar {
  position: relative;
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  padding: 2px;
  display: block;
  background: -webkit-linear-gradient(bottom left, var(--article-avatar-bg-color, #0099ff), var(--article-avatar-bg-color, #0099ff));
  background: -o-linear-gradient(bottom left, var(--article-avatar-bg-color, #0099ff), var(--article-avatar-bg-color, #0099ff));
  background: linear-gradient(to top right, var(--article-avatar-bg-color, #0099ff), var(--article-avatar-bg-color, #0099ff));
}

.avatar-img {
  width: 100%;
  border-radius: 50%;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar::after {
  content: "";
  position: absolute;
  background: url(@/assets/icons/v.png) no-repeat;
  background-size: 12px;
  width: 12px;
  height: 12px;
  right: 0;
  bottom: 0
}

.imgscale img {
  width: 200px;
  height: 140px;
  border-radius: 3px;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  transition: all 0.5s;
}

.imgscale:hover img {
  transform: scale(1.1);
}
  .meta-item {
    margin-right: 10px;
    color: var(--article-info-color, #999);
    font-size: 14px;
  }
  .meta-item i {
    margin-right: 5px;
  }
</style>
